<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>系统管理</title>
  {include file="common/_require"}

  <script>
    var currentHeaderNavItem = 'System';
    var currentLeftNavItem = 'agreement';
  </script>
  <style>
    .layui-form-pane .layui-form-label {
      width: 160px
    }

    .layui-form-pane .layui-input-block {
      margin-left: 160px;
    }
  </style>
</head>

<body class="layui-layout-body">

  <div class="layui-layout layui-layout-admin">
    {include file="common/_header"}

    {include file="common/left_system"}

    <div class="layui-body">

      <div style="padding:15px">
        <div class="main-header">
          <span class="layui-breadcrumb">
            <a>首页</a>
            <a><cite>用户协议管理</cite></a>
          </span>
        </div>
        <div class="main-container">
          <div class="layui-row">

            <div class="layui-col-md12">

              <div id="toolbar">
                <!-- Add font size dropdown -->
                <select class="ql-size" lay-ignore>
                  <option value="small">小号</option>
                  <!-- Note a missing, thus falsy value, is used to reset to default -->
                  <option selected>正常</option>
                  <option value="large">大号</option>
                  <option value="huge">特大号</option>
                </select>
                <!-- Add a bold button -->
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-link"></button>
                <button class="ql-underline"></button>
                <button class="ql-strike"></button>
                <button class="ql-blockquote"></button>
                <button class="ql-code-block"></button>
                <button class="ql-header" value="1" title="大标题"></button>
                <button class="ql-header" value="2" title="小标题"></button>
                <button class="ql-list" value="ordered" title="有序列表"></button>
                <button class="ql-list" value="bullet" title="无序列表"></button>

                <!-- Add subscript and superscript buttons -->
                <button class="ql-script" value="sub"></button>
                <button class="ql-script" value="super"></button>
                <button class="ql-indent" value="-1"></button>
                <button class="ql-indent" value="+1"></button>
                <button class="ql-direction" value="rtl"></button>
                <select class="ql-color" lay-ignore></select>
                <select class="ql-background" lay-ignore></select>
                <select class="ql-font" lay-ignore></select>
                <button class="ql-align" value="center"></button>
                <button class="ql-align" value=""></button>
                <button class="ql-align" value="right"></button>
                <button class="ql-align" value="justify"></button>
                <button class="ql-image" title="选择图片"></button>


              </div>
              <div id="editor">

              </div>
              <div class="content" style="display: none;">
                {:json_encode(unserialize(get_system_config('user_agreement')))}
              </div>
              <div>
                <div class="layui-btn layui-btn-fluid save-article">保存</div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>


    {include file="common/_footer"}
  </div>
  <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
  <script src="/static/lib/quill/quill.min.js"></script>
  <script>
    layui.use(['layer', 'upload'], function () {
      var upload = layui.upload;
      var layer = layui.layer;
      var currentRange = {
        index: 0,
        lenght: 0
      }
      var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
          toolbar: '#toolbar',

        },

      });

      quill.setContents(JSON.parse($('.content').text()))

      quill.on('selection-change', function (range, oldRange, source) {
        if (range) {
          if (range.length == 0) {
            console.log('User cursor is on', range.index);
          } else {
            var text = quill.getText(range.index, range.length);
            console.log('User has highlighted', text);
          }
          currentRange = range;
          console.log(currentRange);

        } else {
          console.log('Cursor not in the editor');
        }
      });

      quill.on('text-change', function (delta, oldDelta, source) {

        if (source == 'api') {
          console.log("An API call triggered this change.");
        } else if (source == 'user') {
          console.log("A user action triggered this change.");
        }
      });

      var uploadSiteLogo = upload.render({
        elem: '.ql-image',
        url: '{:url("File/save")}',
        data: {
          type: 4,
          dir: 'article'
        },
        accept: 'images',
        done: function (result) {
          if (result.code == 0) {
            layer.msg('上传成功');
            quill.insertEmbed(++currentRange.index, 'image', result.data.src);
          } else {
            layer.msg(result.msg)
          }
        }
      })
      var toolbar = quill.getModule('toolbar');
      toolbar.addHandler('image', function () {
        return false;
      });

      $('.save-article').click(function () {
        var content = quill.getContents()
        console.log(content);
        $.post("{:url('admin/System/update')}", {
          user_agreement: content.ops,
          user_agreement_html: $('#editor .ql-editor').html()
        }, function () {
          layer.msg('保存完成')
        })
      })
    })
  </script>
</body>

</html>